<template>
    <view>
        <!-- 轮播图 -->
        <swiper autoplay indicator-dots	circular indicator-active-color="#FF2F41">
            <swiper-item 
            v-for="(item,index) in detail.pics" 
            :key="index"
            @click="previewImg(item.pics_mid_url)">
                <image :src="item.pics_mid_url"></image>
            </swiper-item>
        </swiper>

        <!-- 商品信息 -->
        <view class="goods-info">
            <view class="price">
                ￥<text>{{detail.goods_price}}</text>
            </view>
            <view class="desc">
                <view class="title">{{detail.goods_name}}</view>
                <view class="collect-box">
                    <view class="iconfont icon-shoucang"></view>
                    <text>收藏</text>
                </view>
            </view>
        </view>

        <!-- 商品详细信息 -->
        <view class="detail-container">
            <view class="title">图文详情</view>
            <rich-text :nodes="detail.goods_introduce"></rich-text>
        </view>

        <!-- 底部工具栏 -->
        <view class="btm-tool">
            <view class="func">
                <view class="func-item">
                    <view class="iconfont icon-kefu"></view>
                    <text>联系客服</text>
                    <button open-type="contact" class="open-btn"></button>
                </view>
                <view class="func-item">
                    <view class="iconfont icon-yixianshi-"></view>
                    <text>分享</text>
                    <button open-type="share" class="open-btn"></button>
                </view>
                <navigator url="/pages/cart/index" class="func-item" open-type="switchTab">
                    <view class="iconfont icon-gouwuche"></view>
                    <text>购物车</text>
                </navigator>
            </view>
            <view class="operate">
                <view class="join" @click="joinCart">加入购物车</view>
                <view class="settle">立即购买</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            detail:{
                goods_id:null
            }
        }
    },
    methods:{
        loadGoodsDetail(){
            this.request({
              url: '/goods/detail',
              data:{'goods_id':this.detail.goods_id}
            }).then(res => {
                this.detail = res;
                // 处理webp图片在iphone上不能显示的问题
                this.detail.goods_introduce = this.detail.goods_introduce.replace(/\.webp/g,'.jpg');
            })
        },
        // 小程序功能：预览图片
        previewImg(current){
            let urls = this.detail.pics.map(v => v.pics_mid_url);
            uni.previewImage({
              current: current,
              urls: urls
            })
        },
        // 加入购物车
        joinCart(){
            // 注意findIndex
            const carts = uni.getStorageSync('carts') || [];
            const index = carts.findIndex(goods => goods.goods_id == this.detail.goods_id);
            if(index === -1){
                this.detail.count = 1;
                this.detail.checked = true;
                carts.push(this.detail);
            }else{
                carts[index].count++;
            }
            uni.setStorageSync('carts',carts);
            
            // 轻提示
            uni.showToast({
              title: '已加入',
              mask:true //可以防止误触重复加入
            })
        }
    },
    onLoad(option){
        this.detail.goods_id = option.id;
        this.loadGoodsDetail();
    }
}
</script>

<style lang="scss">
swiper{
    width:100vw;
    height:40vh;
    swiper-item{
        width:100vw;
        height:40vh;
        text-align: center;
        image{
            width:77%;
            height:100%;
        }
    }
}
.goods-info{
    padding:0 10rpx;
    padding-bottom: 10rpx;
    border-bottom: 10rpx solid #c0c0c0;
    .price{
        padding: 20rpx 30rpx;
        color: $theme-color;
        text{
            font-size: 32rpx;
        }
    }
    .desc{
        display: flex;
        justify-content: space-between;
        .title{
            flex:85%;
            padding:0 30rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            border-right: 1px solid #c0c0c0;
            // 拆散单词
            word-break: break-all;
        }
        .collect-box{
            flex:15%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .iconfont{
                font-size: 28rpx;
            }
            text{

            }
        }
    }
}
.detail-container{
    padding-bottom: 90rpx;
    .title{
        color: $theme-color;
        font-weight: 700;
        padding:20rpx;
    }
}
.btm-tool{
    width:100vw;
    height:90rpx;
    display: flex;
    position: fixed;
    left:0;
    bottom:0;
    background-color: #fff;
    border-top: 1px solid #c0c0c0;
    .func{
        flex:55%;
        display: flex;
        .func-item{
            position: relative;
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .iconfont{
                font-size: 28rpx;
            }
            text{

            }
            .open-btn{
                position: absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                z-index: 100;
                opacity: 0;//不透明度
            }
        }
    }
    .operate{
        flex:45%;
        display: flex;
        .join{
            flex:1;
            text-align: center;
            line-height: 90rpx;
            color: #fff;
            background-color: #FFA607;
        }
        .settle{
            flex:1;
            text-align: center;
            line-height: 90rpx;
            color: #fff;
            background-color: #FF2F41;
        }
    }
}
</style>